<template>
  <div class="container bg-gray">
      <div class="topdiv">
          <div class="left-txt">
              签到累计积分：10
          </div>
          <div class="right-txt">
              续签到<br><span>5</span>天
          </div>
          <div class="dosign-btn">              
              开始签到
          </div>
          
      </div>
      <div class="p1">
        <div class="p1-title">
            <div class="flex">
                <div>
                    <img src="../../assets/icons/sign/left.png" alt="" class="left-img">
                </div>
                <div class="flex-con p1-title-txt">
                    2018年3月
                </div>
                <div>
                    <img src="../../assets/icons/sign/right.png" alt="" class="right-img">
                </div>
            </div>
            <div class="twolines">
                <div class="oneline online-left"></div>
                <div class="oneline online-right"></div>
            </div>
        </div>
        <div class="p1-content">
            <div class="flex days-label">
                <div class="flex-con">
                    日
                </div>
                <div class="flex-con">
                    一
                </div>
                <div class="flex-con">
                    二
                </div>
                <div class="flex-con">
                    三
                </div>
                <div class="flex-con">
                    四
                </div>
                <div class="flex-con">
                    五
                </div>
                <div class="flex-con">
                    六
                </div>
            </div>
            <div class="days flex">
                <div class="day" v-for="item in days" :class="{today_day:item >2 && item<10}" :key="item">
                    <div class="today" v-if="item == 12"></div>
                    <div class="signed-day" v-if="item >2 && item<10"></div>
                    {{item}}
                </div>                 
            </div>
        </div>
      </div>
      <div class="sign-rules">
          <div class="sign-title">
              签到规则
          </div>
          <div class="sign-content">
              <div class="sign-item">
                  1、这里是签到规则这里是签到规则这里是签到规则这里
是签到规则
              </div>
              <div class="sign-item">
                  2、这里是签到规则这里是签到规则这里是签到规则这里
是签到规则</div>   
          </div>
      </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      days: []
    };
  },
  created() {
    for (let i = 0; i < 30; i++) {
      this.days.push(i + 1);
    }
  }
};
</script>

<style lang="scss" scoped>
.topdiv {
  height: 5.0133rem;
  background-image: url("../../assets/icons/sign/topbg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-align: center;
  .left-txt {
    position: absolute;
    left: 0.4133rem;
    top: 0.4533rem;
    font-size: 0.3733rem;
    color: rgba(255, 255, 255, 0.8);
  }
  .right-txt {
    position: absolute;
    right: 0.4133rem;
    top: 0.4533rem;
    text-align: right;
    font-size: 0.3733rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 0.5467rem;
    span {
      font-size: 0.48rem;
      color: rgba(255, 246, 0, 0.8);
      margin-right: 0.0667rem;
    }
  }
  .dosign-btn {
    width: 3.04rem;
    height: 3.04rem;
    line-height: 3.04rem;
    font-size: 0.3733rem;
    color: #ffa96e;
    text-align: center;
    display: inline-block;
    margin-top: 1.0667rem;
    background-image: url("../../assets/icons/sign/dosign@2x.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
  }
  .dosign-img {
    width: 3.04rem;
    height: 3.04rem;
  }
}
.p1 {
  box-shadow: 0rem 0rem 0.2133rem 0rem rgba(0, 0, 0, 0.16);
  width: 9.2rem;
  height: 8.84rem;
  margin: 0 auto;
  margin-top: 0.44rem;
  border-radius: 0.4533rem;
  overflow: hidden;
  background-color: #ffffff;
  text-align: center;
  .p1-title {
    height: 1.48rem;
    padding-left: 0.4933rem;
    padding-top: 0.4667rem;
    padding-right: 0.4933rem;
    box-sizing: border-box;
    background-image: linear-gradient(180deg, #ffa86e 0%, #ff756a 100%),
      linear-gradient(#faba66, #faba66);
    background-blend-mode: normal, normal;
    font-size: 0.4267rem;
    color: #fff;
    position: relative;
  }
  .left-img {
    width: 0.56rem;
    height: 0.56rem;
  }
  .right-img {
    width: 0.56rem;
    height: 0.56rem;
  }

  .twolines {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.2133rem;
    .oneline {
      width: 0.1733rem;
      height: 0.4267rem;
      background-color: #ffffff;
      box-shadow: 0rem 0.0267rem 0.0933rem 0rem rgba(172, 172, 172, 0.7);
      border-radius: 0.08rem;
      position: absolute;
      bottom: 0;
    }
    .online-left {
      left: 1.24rem;
    }
    .online-right {
      right: 1.16rem;
    }
  }
  .days-label {
    font-size: 0.4267rem;
    color: #ff4141;
    font-weight: bold;
    margin-top: 0.5733rem;
  }
  .p1-content {
    .days {
      padding-top: 0.5rem;
      font-size: 0.4267rem;
      color: #17402a;
      flex-wrap: wrap;
      line-height: 1.1rem;
      .day {
        width: 1.3067rem;
        box-sizing: border-box;        
        position: relative;
      }
      .today {
        width: 0.8667rem;
        height: 0.8667rem;
        box-sizing: border-box;
        border: solid 0.04rem rgba(40, 197, 96, 0.88);
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -0.43335rem;
        margin-left: -0.43335rem;
      }
      .today_day{
        color: #fa5141;
      }
      .signed-day{
          width: 0.9067rem;
	    height: 0.88rem;
        position: absolute;
        left: 27%;
        top: -5%;
        background-image: url('../../assets/icons/sign/footer.png');
        background-size: 100% 100%;
        background-position: 0 0;
        background-repeat: no-repeat;
      }
    }
  }
}
.sign-rules {
  .sign-title {
    font-size: 0.4rem;
    color: #222;
    text-align: center;
    padding-bottom: 0.3067rem;
  }

  width: 9.24rem;
  margin: 0 auto;

  background-color: #ffffff;
  font-size: 0.3467rem;
  color: #333;
  margin-top: 0.3733rem;
  padding: 0.4667rem 0.28rem;
  box-sizing: border-box;
  line-height: 0.5333rem;
  .sign-item {
    padding-bottom: 0.2667rem;
  }
  .sign-item:last-child {
    padding-bottom: 0;
  }
}
.container {
  padding-bottom: 0.6rem;
}
</style>

